Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

Vue3 组合式 API

创建vue应用

初始化vue项目   npm init vue@latest
进入项目文件夹  cd 项目
安装依赖        npm install(简写：npm i)
运行项目        npm dev

基础文件

App.vue
创建组件App

main.js
import引入组件App，将App挂载到#app

index.html
#app即为此处的<div id="app"></div>

通过main.js将vue代码转换为html代码二、基础语法 vue3与vue2的区别在于script模块，抛弃难看的vue2选项式，使用setup，拥抱最新最潮的组合式api吧

<script>
    export default{
        setup(){

        }

        return{
            //return上面setup()中的变量、方法等
        }
    } 
</script>

再进一步改用最新最潮的setup语法糖吧,使用后会自动return

<script setup>

</script>

1.定义对象与变量（响应式）

import {reactive} from "vue"
const person =reactive({
    name:"小明"
    age:"18"
})

reactive绑定一个person对象。对于只学过后端的同学需要注意js中的对象与后端语言的对象有一定的不同，js是没有后端类的概念的，由于对象并不和类关联，于是可以随意地给这个对象增加属性

关于js对象，有、东西的解释

import {ref} from "vue"
const person=ref("小明")

ref底层的本质其实还是reactive，系统会自动根据我们给ref传入的值将它转换成

ref(xx) -> reactive({value:xx})

所以上面的

const person=ref("小明")
//等价于
const person=reactive({
    value:"小明"
})

一般使用ref定义基础数据类型的值，用reactive定义对象或数组

2.定义方法

let money=ref(1)
//写法1
function moneyUp(){
    money.value++
}
//写法2
let moneyUp=function(){
    money.value++
}
//写法3,箭头函数
let moneyUp=()=>{
    money.value++
}

箭头函数写法似乎在某些情况下不推荐使用，那么就干脆以前两种为准

<script setup>
import {ref} from "vue"

let money=ref(1)

function moneyUp(){
    money.value++
}
</script>

<template>
    <p>现在有{{money.value}}元</p>
    <button @click="moneyUp">加钱</button>
</template>

JS箭头函数之：为何用？怎么用？何时用？

3.计算属性computed

“若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。”（也就是计算属性依赖的数据改变缓存才会改变，而方法没有，需要缓存的话就用计算属性）

VUE疑难问题---2、方法和计算属性的区别

import {ref,computed} from "vue"
const money=ref(1)
const moneyUp = computed(() => {
  return money.value
})

看官网吧
计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

4.监听watch

https://blog.csdn.net/qq_36995521/article/details/122576076
这个可以，简洁明了👍 https://www.yisu.com/zixun/614924.html

5.路由

这个不戳👍
https://kalacloud.com/blog/vue-router-tutorial-for-vue-3/

1)在views文件夹下创建不同的页面组件组件的名称需使用驼峰命名。且如果只有一个单词时会报错，

Component name  should always be multi-word

这是正常的，你问我怎么办?虽然也可以关掉eslint语法检查，但还是改名字吧😅

2)在路由js文件下引入页面组件，定义这些组件的名称name与路径path 3)路由js文件引入创建路由的方法，根据这些页面组件创建路由 4)App.vue使用路由js的路径path引入页面组件,关于使用的标签router-link、<router-view/>

通过router-link可以使<router-view/>中的显示内容路由（跳转）到src/router/index.js文件中配置的组件中去

5)main.js使用router

import router from './router'
createApp(App).use(router).mount('#app')

6)路由进阶-导航栏 https://www.jianshu.com/p/c964a988b143
看了好多都是用框架，不利于理解，这个简单易懂👇👍

https://blog.csdn.net/weixin_40400161/article/details/96711757
1-创建需要跳转的页面组件
2-配置路由跳转js文件
3-创建导航栏组件，设定样式,router-link写在这里
4-在App.vue中使用,,可以自定义显示布局

<导航栏组件/>
<router-view/>

6.自定义布局

https://www.cnblogs.com/zouzou-busy/p/13080665.html

其他

单双引号的使用似乎并不严格区分-某博客
 单双引号的使用似乎并不严格区分-知乎

vue3 速成指南